const screenAnimates = {
	'.screen-1': [
		'.screen-1-heading',
		'.screen-1__phone',
		'.screen-1__shadow'
	],
	'.screen-2': [
		'.screen-2__heading',
		'.screen-2__subheading',
		'.screen-2__phone',
		'.screen-2__point_i_1',
		'.screen-2__point_i_2',
		'.screen-2__point_i_3'
	],
	'.screen-3': [
		'.screen-3__title',
		'.screen-3__detail',
		'.screen-3__phone',
		'.screen-3__cube',
		'.screen-3-cube__item'
	],
	'.screen-4': [
		'.screen-4__heading',
		'.screen-4__subheading',
		'.screen-4__type__item_i_1',
		'.screen-4__type__item_i_2',
		'.screen-4__type__item_i_3',
		'.screen-4__type__item_i_4'
	],
	'.screen-5': [
		'.screen-5__heading',
		'.screen-5__subheading',
		'.screen-5__bg'
	]
}
//获取元素
var getElem = function(selector) {
	return document.querySelector(selector)
}

//获取全部元素
var getAllElem = function(selector) {
	return document.querySelectorAll(selector)
}
//获取元素的样式
var getEleCls = function(ele) {
	return ele.getAttribute('class')
}
// 设置元素的样式
var setEleCls = function(ele,cls) {
	return ele.setAttribute('class',cls)
}
//为元素添加样式
var addEleCls = function(ele,cls) {
	var bsCls = getEleCls(ele)
	if(bsCls.indexOf(cls) === -1) {
		setEleCls(ele,bsCls + ' ' + cls)
	}
	return;
}
//为元素删减样式
var delEleCls = function(ele,cls) {
	var bsCls = getEleCls(ele)
	if(bsCls.indexOf(cls) > -1) {
	  setEleCls(ele,bsCls.split(cls).join(' ').replace(/\s+/g,' '))	
	}
	return;
}

function setScreenAnimate(screenCls) {
	// 获取当前屏幕的元素
	var screen = document.querySelector(screenCls)
	// debugger
	//需要设置动画的元素
	var animateEles = screenAnimates[screenCls]
	for (var i = 0; i < animateEles.length; i++) {
		var ele = document.querySelector(animateEles[i])
		var baseCls = ele.getAttribute('class')
		ele.setAttribute('class', baseCls + ' ' + animateEles[i].substr(1) + '_animate_init')
	}
}

// 第一步初始化设置
window.onload = function() {
	for (k in screenAnimates) {
		if(k === '.screen-1') {
			continue
		}
		setScreenAnimate(k);
	}
}
// 第二部滚动条设置
function playAnimateDown(screenCls) {
	// 获取当前屏幕的元素
	var screen = document.querySelector(screenCls)
	// debugger
	//需要设置动画的元素
	var animateEles = screenAnimates[screenCls]
	for (var i = 0; i < animateEles.length; i++) {
		var ele = document.querySelector(animateEles[i])
		var baseCls = ele.getAttribute('class')
		ele.setAttribute('class', baseCls.replace('_animate_init', '_animate_done'))
	}
}

// 附加第一屏的初始化 跳过init
setTimeout(function(){playAnimateDown('.screen-1');},100)

//获取所有的headItem
var navItems = getAllElem('.header-nav-ltem')
var outlineItems = getAllElem('.outline-item')
var navTip = getElem('.header__nav-tip')

//切换itemNav

var switchNavItemActive = function(idx) {
	for(var i=0;i<navItems.length;i++) {
		delEleCls(navItems[i],'header-nav-ltem_active')
		navTip.style.left = 0
	}
	for(var j=0;j<outlineItems.length;j++) {
		delEleCls(outlineItems[j],'outline-item-select')
	}
	addEleCls(outlineItems[idx],'outline-item-select')
	addEleCls(navItems[idx],'header-nav-ltem_active')
	navTip.style.left = (idx*72) + 'px'
}



window.onscroll = function () {
var top  = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset;
  if(top>150) {
	  addEleCls(getElem('.header'),'header_status_black')
  }else {
	 delEleCls(getElem('.header'),'header_status_black')
	  switchNavItemActive(0)
  }

  console.log(top)
  if(top>800*1-100) {
	 playAnimateDown('.screen-2')
	  switchNavItemActive(1)
  }
  if(top>800*2-100) {
  	 playAnimateDown('.screen-3')
	  switchNavItemActive(2)
  }
  if(top>800*3-100) {
  	 playAnimateDown('.screen-4')
	  switchNavItemActive(3)
  }
  if(top>800*4-100) {
  	 playAnimateDown('.screen-5')
	  switchNavItemActive(4)
  }
}
//导航条点击跳转
var setNavJump = function(i,lib) {
	var ele = lib[i]
	ele.onclick = function() {
		document.documentElement.scrollTop  = i*800+1
	}
}
for(var i =0;i<navItems.length;i++) {
	setNavJump(i,navItems)
}
for(var n =0;n<outlineItems.length;n++) {
	setNavJump(n,outlineItems)
}
//滑动门
var navTip =getElem('.header__nav-tip')

var setTip = function(idx,lib) {
  lib[idx].onmouseover = function() {
	  navTip.style.left = (idx*72) +'px'
  }
  var currentIndex = 0
  lib[idx].onmouseout = function() {
	  for(var i=0;i<navItems.length;i++) {
		  if(getEleCls(navItems[i]).indexOf('header-nav-ltem_active') > -1) {
			  currentIndex = i
			  break
		  }
	  }
	   navTip.style.left = (currentIndex*72) +'px'
  } 	  
}
for(var i=0;i<navItems.length;i++) {
	setTip(i,navItems)
}
